<html lang="en"><head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Pablo Arroyo">
    <link rel="shortcut icon" href="images/ico/favicon.ico">

    <title>Pagos 1.0</title>

    <!-- Bootstrap core CSS -->
    <link href="dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="signin.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  <script src="dist/js/jquery-1.11.0.min.js"></script><script src="dist/js/bootstrap.min.js"></script></head>
  
  
  
  
<body class="">

    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-5">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Sistema de Pagos</a>          
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-5">
		
		<ul class="nav navbar-nav navbar-right">

        <li class="dropdown" id="perfil">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Pablo Arroyo<b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Cuenta</a></li>
            <li class="divider"></li>
            <li><a href="logout.php">Salir</a></li>
          </ul>
        </li>
      </ul>


        </div>
      </div>
    </nav>
	<br>
	<br>
	
    
<table width="100%">

    <tbody><tr>
    
        <td width="10%" valign="top" align="center">

            <div class="btn-group">
                <button type="button" class="btn btn-default dropdown-toggle btn-danger btn-success" data-toggle="dropdown">
                <span data-bind="label">2013</span>&nbsp;<span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li id="dropBoxAnios1"><a href="#">2012</a></li>
                    <li id="dropBoxAnios2"><a href="#">2013</a></li>
                    <li id="dropBoxAnios3"><a href="#">2014</a></li>
                </ul>
            </div>
            
            <script type="text/javascript">
              
              $('#dropBoxAnios1, #dropBoxAnios2, #dropBoxAnios3').on('click', function(event) {
              
                  var $target = $( event.currentTarget );
                  $target.closest( '.btn-group' )
                    .find( '[data-bind="label"]' ).text( $target.text() )
                    .end()
                    .children( '.dropdown-toggle' ).dropdown( 'toggle' );
                    
                  $("#titulo").text("Detalle de Pagos Anuales - " + $target.text());
                  
                  $anio = $target.text();
                  
                  $("#pagosTbl tbody").remove();
                  $('#progressPagos').modal();
                  
                  //var $noPagado = '<button id="botonaso" type="button" class="btn btn-danger">No Pagado</button>';
                  //var $noPagado = '<img src="wrong.jpg" alt="wrong" class="img-responsive"  style="width: 50%; height: 25%;">';
                  var strBtnPagoNoPago = '<button id="btnPago_%MES%_%ID%" type="button" class="btn btn-danger">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button>';
                  var cont = 0;
                  
                  $.ajax({
                        url:'dbPagos.php',
                        type:'POST',
                        data: { 'anio': $anio }
                    }).success(function(json){
                          $.each(json, function(i, item) {                        
                              if(typeof item == 'object') {
                              
                                  cont = cont + 1;
                              
                                  $('#pagosTbl').append('<tr id="filasas"> <td>' + item.servicio + '</td>' 
                                  + '<td align="center">' + (strBtnPagoNoPago.replace("%MES%", 1 )).replace("%ID%", cont) + '</td>' + '<td align="center">' + (strBtnPagoNoPago.replace("%MES%", 2  )).replace("%ID%", cont) + '</td>'
                                  + '<td align="center">' + (strBtnPagoNoPago.replace("%MES%", 3 )).replace("%ID%", cont) + '</td>' + '<td align="center">' + (strBtnPagoNoPago.replace("%MES%", 4  )).replace("%ID%", cont) + '</td>'
                                  + '<td align="center">' + (strBtnPagoNoPago.replace("%MES%", 5 )).replace("%ID%", cont) + '</td>' + '<td align="center">' + (strBtnPagoNoPago.replace("%MES%", 6  )).replace("%ID%", cont) + '</td>'
                                  + '<td align="center">' + (strBtnPagoNoPago.replace("%MES%", 7 )).replace("%ID%", cont) + '</td>' + '<td align="center">' + (strBtnPagoNoPago.replace("%MES%", 8  )).replace("%ID%", cont) + '</td>'
                                  + '<td align="center">' + (strBtnPagoNoPago.replace("%MES%", 9 )).replace("%ID%", cont) + '</td>' + '<td align="center">' + (strBtnPagoNoPago.replace("%MES%", 10 )).replace("%ID%", cont) + '</td>'
                                  + '<td align="center">' + (strBtnPagoNoPago.replace("%MES%", 11)).replace("%ID%", cont) + '</td>' + '<td align="center">' + (strBtnPagoNoPago.replace("%MES%", 12 )).replace("%ID%", cont) + '</td></tr>');
                              //$('#pagosTbl').append('<tr id="filasas"> <td>' + item.servicio + '</td>
                              } 
                              else {
                                  return false;
                              }
                          }) // end $.each() loop
                          
                          $('#progressPagos').modal('hide');
                  
                  })
                      .fail(function()  {alert("ERROR!!");});    
              });
    
    </script>
            
        </td>
        
        <td width="80%">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title" id="titulo">Detalle de Pagos Anuales - 2013</h3>
                </div>
                <div class="panel-body">
                    
                    <table class="table table-bordered" id="pagosTbl">
                        <thead>
                            <tr>
                                <th align="center"></th>
                                <th align="center">Enero</th>
                                <th align="center">Febrero</th>
                                <th align="center">Marzo</th>
                                <th align="center">Abril</th>
                                <th align="center">Mayo</th>
                                <th align="center">Junio</th>
                                <th align="center">Julio</th>
                                <th align="center">Agosto</th>
                                <th align="center">Septiembre</th>
                                <th align="center">Octubre</th>
                                <th align="center">Noviembre</th>
                                <th align="center">Diciembre</th>
                            </tr>
                        </thead>

                    <tbody><tr id="filasas"> <td>Edenor</td><td align="center"><button id="btnPago_1_1" type="button" class="btn btn-danger">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button></td><td align="center"><button id="btnPago_2_1" type="button" class="btn btn-danger">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button></td><td align="center"><button id="btnPago_3_1" type="button" class="btn btn-danger">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button></td><td align="center"><button id="btnPago_4_1" type="button" class="btn btn-danger">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button></td><td align="center"><button id="btnPago_5_1" type="button" class="btn btn-danger">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button></td><td align="center"><button id="btnPago_6_1" type="button" class="btn btn-danger">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button></td><td align="center"><button id="btnPago_7_1" type="button" class="btn btn-danger">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button></td><td align="center"><button id="btnPago_8_1" type="button" class="btn btn-danger">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button></td><td align="center"><button id="btnPago_9_1" type="button" class="btn btn-danger">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button></td><td align="center"><button id="btnPago_10_1" type="button" class="btn btn-danger">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button></td><td align="center"><button id="btnPago_11_1" type="button" class="btn btn-danger">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button></td><td align="center"><button id="btnPago_12_1" type="button" class="btn btn-danger">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button></td></tr><tr id="filasas"> <td>Fibertel</td><td align="center"><button id="btnPago_1_2" type="button" class="btn btn-danger">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button></td><td align="center"><button id="btnPago_2_2" type="button" class="btn btn-danger">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button></td><td align="center"><button id="btnPago_3_2" type="button" class="btn btn-danger">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button></td><td align="center"><button id="btnPago_4_2" type="button" class="btn btn-danger">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button></td><td align="center"><button id="btnPago_5_2" type="button" class="btn btn-danger">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button></td><td align="center"><button id="btnPago_6_2" type="button" class="btn btn-danger">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button></td><td align="center"><button id="btnPago_7_2" type="button" class="btn btn-danger">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button></td><td align="center"><button id="btnPago_8_2" type="button" class="btn btn-danger">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button></td><td align="center"><button id="btnPago_9_2" type="button" class="btn btn-danger">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button></td><td align="center"><button id="btnPago_10_2" type="button" class="btn btn-danger">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button></td><td align="center"><button id="btnPago_11_2" type="button" class="btn btn-danger">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button></td><td align="center"><button id="btnPago_12_2" type="button" class="btn btn-danger">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button></td></tr><tr id="filasas"> <td>Cablevision</td><td align="center"><button id="btnPago_1_3" type="button" class="btn btn-danger">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button></td><td align="center"><button id="btnPago_2_3" type="button" class="btn btn-danger">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button></td><td align="center"><button id="btnPago_3_3" type="button" class="btn btn-danger">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button></td><td align="center"><button id="btnPago_4_3" type="button" class="btn btn-danger">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button></td><td align="center"><button id="btnPago_5_3" type="button" class="btn btn-danger">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button></td><td align="center"><button id="btnPago_6_3" type="button" class="btn btn-danger">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button></td><td align="center"><button id="btnPago_7_3" type="button" class="btn btn-danger">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button></td><td align="center"><button id="btnPago_8_3" type="button" class="btn btn-danger">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button></td><td align="center"><button id="btnPago_9_3" type="button" class="btn btn-danger">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button></td><td align="center"><button id="btnPago_10_3" type="button" class="btn btn-danger">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button></td><td align="center"><button id="btnPago_11_3" type="button" class="btn btn-danger">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button></td><td align="center"><button id="btnPago_12_3" type="button" class="btn btn-danger">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button></td></tr></tbody></table>
                                            <script>
                                              
  $('.btn').click(function () {
    var btn = $(this);
    //if (btn.text() == 'HOLA')
    //  btn.text('CHAU');
    //else
    //  btn.text('HOLA');
    
    btn.toggleClass("btn-danger ").toggleClass("btn-success");
    
  });
</script>
                </div>
            </div>
        </td>
        <td width="10%">
    </td></tr>
</tbody></table>



    
    <div class="modal fade in" id="progressPagos" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">Cargando...</h4>
                </div>
                <div class="modal-body center-block">
                    <div class="progress progress-striped active">
                        <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                            <span class="sr-only">100% Complete</span>
                        </div>
                    </div>
                </div>
            </div>
        </div> 
    </div>
    
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
  
</body></html>